<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        height: 100%;
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
      .content {
        margin: 100px auto;
        width: 800px;
        height: 800px;
        text-align: center;
        position: relative;

      }
      .con {
        width: 600px;
        height: 600px;
        margin-left: 100px;
        margin-top: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

      h1 {
        font-size: 60px;
        font-family: STXingkai;
        color: rgb(0, 174, 255);
      }
      .hole {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: url("https://www.jq22.com/demo/gamedadishu201910110114/img/hole.png")
          no-repeat;
        background-size: 200px 200px;
      }
      .btn {
        width: 130px;
        height: 50px;
        font-size: 25px;
        background-color:rgb(0, 174, 255);;
        border-radius: 10px;
        border: none;
        cursor: pointer;
       
      }
      .btn:hover{
        background-color:pink;
        background-size: 400%;
        color: #fff;
        cursor: pointer;
      }
    

      .hole img.mouse {
        display: none;
        padding-top: 50px;
        cursor: pointer;
      }
      .hole img.boom {
        display: none;
        padding-top: 10px;
        cursor: pointer;
      }
      .hole img.cat {
        display: none;
        padding-top: 40px;
        cursor: pointer;
      }
      #time{
        width: 150px;
        height: 50px;
        font-size: 25px;
        font-family: '楷体';
        font-weight: 600;
        line-height: 50px;
        position: absolute;
        top: 120px;
        left: 260px;
      }
      #fraction{
        width: 150px;
        height: 50px;
        font-size: 25px;
        font-family: '楷体';
        font-weight: 600;
        line-height: 50px;
        position: absolute;
        top: 120px;
        right: 240px;
      }
      .fraction,.time{
        font-weight: 600;
        font-size: 25px;
        font-family: '楷体';
      }
     
    </style>
  </head>
  <body>
    <div class="content">
      <h1>打地鼠</h1>
      <button class="btn">开始游戏</button>
      <div id="fraction">总得分：<span class="fraction"></span></div>
      <div id="time">倒计时：<span class="time"></span></div>
      <div class="con">
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        <div class="hole">
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/boom.png"
            class="boom"
            alt=""
            width="200px"
            height="200px"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225200557_topon.thumb.400_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662288482&t=de17924bf1178868d7895b01a6b0a499"
            alt=""
            class="cat"
            width="130px"
            height="130px"
            style="border-radius: 50%"
          />
          <img
            src="https://www.jq22.com/demo/gamedadishu201910110114/img/mouse.png"
            class="mouse"
            alt=""
            width="110px"
            height="110px"
          />
        </div>
        
    </div>
    <script>
      $(function () {
        //定时器
        var timer = null;
        // 获取全部的坑
        var hole = $(".hole");
        // 判断是否开始游戏
        var judge=false
        // 给开始按钮添加事件
        $(".btn").on("click", function () {
          if(judge==true){
            alert('游戏已开始')
          }else{
            judge=true
          // 给倒计时赋值
          $(".time").html("60秒");
          //倒计时
          var countDowns = setInterval(countDown, 1000);
          // 声明的倒计时时间
          var timeing = 60;
          // 倒计时函数
          function countDown() {
            timeing--;
            $(".time").html(timeing + "秒");
            //判断 时间 为零时
            if (timeing === 0) {
                // 总分
                var totalScore = $(".fraction").html();
                // 清除倒计时定时器
                clearInterval(countDowns);
                // 清除老鼠定时器
                clearInterval(timer);
                // 弹出分数
                alert(`游戏结束\n您的总分为：${totalScore}分`);
                judge=false
                //所有隐藏
                 hole.children().stop().hide();
              }
            }
            timer = setInterval(mouseout, 1000);
          }
          // 定时器速度
          var speed = 1000;
          // 老鼠定时器
          function mouseout() {
            // 分数
            var fraction = $(".fraction").html();
            //判断分数改变速度
            if (fraction <= 10) {
              clearInterval(timer);
              speed = 2500;
              timer = setInterval(mouseout, speed);
            } else if (fraction >= 20 && fraction < 30) {
              clearInterval(timer);
              speed = 2000;
              timer = setInterval(mouseout, speed);
            } else if (fraction >= 30 && fraction < 40) {
              clearInterval(timer);
              speed = 1000;
              timer = setInterval(mouseout, speed);
            } else if (fraction >= 40) {
              clearInterval(timer);
              speed = 500;
              timer = setInterval(mouseout, speed);
            }
            //所有隐藏
            hole.children().stop().hide();
            // 老鼠的随机数
            var x = Math.floor(Math.random() * 9);
            var y = Math.floor(Math.random() * 9);
            var z = Math.floor(Math.random() * 9);
            //猫的随机数
            var k = Math.floor(Math.random() * 9);

            if (
              x === y ||
              x === z ||
              y === z ||
              x === k ||
              y === k ||
              z === k
            ) {
              mouseout();
            } else {
              // 老鼠显示
              hole.eq(x).children(".mouse").stop().fadeIn();
              hole.eq(y).children(".mouse").stop().fadeIn();
              hole.eq(z).children(".mouse").stop().fadeIn();
              // 猫显示
              hole.eq(k).children(".cat").stop().fadeIn();
            }
          }
          // boom打击显示
          function clearboom() {
            $.each(hole, function (i) {
              hole.eq(i).children(".boom").stop().hide();
            });
          }
          // 打击老鼠的boom
          $.each(hole, function (i) {
            hole
              .eq(i)
              .children(".mouse")
              .on("click", function () {
                hole.eq(i).children(".mouse").hide();
                hole.eq(i).children(".boom").show();
                setTimeout(clearboom, 260);
                var funshu = Number($(".fraction").html());
                $(".fraction").html(funshu + 1);
              });
          });
          // 打击猫的boom
          $.each(hole, function (i) {
            hole
              .eq(i)
              .children(".cat")
              .on("click", function () {
                hole.eq(i).children(".cat").hide();
                hole.eq(i).children(".boom").show();
                setTimeout(clearboom, 260);
                var funshu = Number($(".fraction").html());
                $(".fraction").html(funshu - 1);
              });
          });
        });
      });
    </script>
  </body>
</html>
